import React, { useEffect } from 'react';
import { Modal, Input, Form, Button, message } from 'antd';
import styles from './index.module.scss';
import { editPassword } from '@/service'
import { useTranslation } from 'react-i18next';


export default (props) => {
  const { t } = useTranslation();
  const { visible, onClose } = props;
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm(); // 创建表单实例
  const onSubmit = async () => {
    try {
      await form.validateFields().then(async (values) => {
        const { password, newPassword } = values;
        let params = {
          password,
          newPassword
        }
        editPassword(params).then(res => {
          if (res.code === 0) {
            messageApi.open({
              type: 'success',
              content: res?.msg,
            });
            handleClose();
          } else {
            messageApi.error({
              type: 'error',
              content: res?.msg,
            });
          }
        }).catch(e => {
          messageApi.error({
            type: 'error',
            content: e?.msg
          });
        });
      })
    } catch (error) {
      messageApi.error({
        type: 'error',
        content: error?.msg,
      });
    }
  };
  const handleClose = () => {
    onClose();
    form.resetFields();
  }
  return (
    <Modal
      title={t('common.modal.title.changePasswad')}
      open={visible}
      onCancel={handleClose}
      className='custom-notitle-modal'
      width={550}
      destroyOnClose
      maskClosable={false}
      footer={null}
    >
      <Form
        form={form}
        name="Password_form"
        className={`custom-form-primary ${styles.psdform}`}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 12 }}
      >
        <Form.Item
          label={t('common.modal.label.passward')}
          name="password"
          rules={[
            { required: true, message: t('common.modal.passwordplacehoder') }
          ]}
        >
          <Input.Password
            placeholder={t('common.modal.passwordplacehoder')} />
        </Form.Item>
        <Form.Item
          label={t('common.modal.label.passwardNew')}
          name="newPassword"
          rules={[
            { required: true, message: t('common.modal.newPasswordplacehoder') }
          ]}
        >
          <Input.Password
            placeholder={t('common.modal.newPasswordplacehoder')} />
        </Form.Item>
        <Form.Item
          label={t('common.modal.label.reEnter')}
          name="newPasswordAgain"
          dependencies={['newPassword']}
          rules={[
            { required: true, message: t('common.modal.newPasswordReplacehoder') },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('newPassword') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error(t('common.modal.passwordinconsistencyPlacehoder')));
              },
            }),
          ]}
        >
          <Input.Password
            placeholder={t('common.modal.newPasswordReplacehoder')} />
        </Form.Item>
        <div className={styles.btnGroup}>
          <Form.Item noStyle>
            <Button className={styles.cancelBtn} onClick={handleClose}>
              {t('common.modal.button.cancel')}
            </Button>
            <Button type='primary' htmlType="submit" onClick={onSubmit}>
              {t('common.modal.button.submit')}
            </Button>
          </Form.Item>
        </div>
      </Form>
      {contextHolder}
    </Modal>
  );
}
